<template>
  <div class="add-page">
    <div class="span12">
      <div class="page-header">
        <h1 v-if="this.$route.query.bookId!=null">更新书籍 <small>demo</small></h1>
        <h1 v-else>新增书籍 <small>demo</small></h1>
      </div>
      <div class="container-fluid content">
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h2 v-if="this.$route.query.bookId!=null" class="panel-title">书籍信息更新</h2>
                <h2 v-else class="panel-title">书籍信息录入</h2>
              </div>
              <br/>
              <div class="panel-body"> 
                <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputName" class="col-sm-3 control-label">书籍名称</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="inputName" placeholder="请输入书籍名称" v-model="book.name">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPrice" class="col-sm-3 control-label">书籍售价</label>
                    <div class="col-sm-9">
                      <input type="number" class="form-control" id="inputPrice" placeholder="请输入书籍售价" v-model="book.price">
                    </div>
                  </div>
                  <br/>
                  <div class="form-group">
                    <div class="cow">
                      <div v-if="this.$route.query.bookId!=null" class="col-md-6">
                        <button type="submit" class="btn btn-default btn-primary" @click="modifyBook">确定更新</button>
                      </div>
                      <div v-else class="col-md-6">
                        <button type="submit" class="btn btn-default btn-primary" @click="addBook">确定录入</button>
                      </div>
                      <div class="col-md-6">
                        <button type="submit" class="btn btn-default btn-danger" @click="cancel">取消录入</button>
                      </div>
                    </div>
                  </div>
                </form> 
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.content {
  padding: 5%;
}
</style>

<script>
export default {
  data(){
    return {
      book: {
        name: '',
        price: 0,
        id: 0
      },
      status: 1
    }
  },
  created() {
    this.saveOrUpdate()
  },
  methods: {
    //判断是修改书籍信息还是新增书籍
    saveOrUpdate(){
      if(this.$route.query&&this.$route.query.bookId){
        this.getBookInfo()
      }
    },
    //跳转返回主界面
    cancel(){
      this.$router.push('/')
    },
    //添加书籍
    async addBook(){
      const { data: res } = await this.$http.post('book', this.book )
      this.status = res.code
      if(this.status == 0){
        alert("书籍数据录入成功")
      }else{
        alert(res.msg)
      }
      this.$router.push('/')
    },
    //获取信息
    async getBookInfo(){
      const { data: res } = await this.$http.get(`book/${this.$route.query.bookId}`)
      this.book = res.data
    },
    //修改书籍信息
    async modifyBook(){
      const { data: res } = await this.$http.put(`book/${this.$route.query.bookId}`, this.book)
      this.status = res.code
      if(this.status == 0){
        alert("书籍数据更新成功")
      }else{
        alert(res.msg)
      }
      this.$router.push('/')
    }
  }
}
</script>